import { defineComponent } from 'vue'

import NavBar from '@components/NavBar'

import style from '.module.less'
import pcStyle from './pc.module.less'
import bodyImg from './img/boy.png'
import girlImg from './img/girl.png'
import { useRouter } from 'vue-router'
import { isPc, ModelGender, modelS } from '@views/store'
import { defineMeta } from '@/fileroute/router'

defineMeta({ lazy: false })
export default defineComponent({
    setup: () => {
        const router = useRouter()
        const handleChoose = (sex: ModelGender) => {
            modelS.modelGender = sex
            router.push('/face')
        }
        const contentCom = <div class='content'>
            <div class='title'>请选择形象性别</div>
            <img class='img' src={girlImg} onClick={() => handleChoose('FEMALE')} />
            <img class='img' src={bodyImg} onClick={() => handleChoose('MALE')} />
        </div>
        const phoneCom = () => <div class={style.root}>
            <NavBar title="创建形象" />
            {contentCom}
        </div>
        const pcCom = () => <div class={pcStyle.root}>
            {contentCom}
        </div>
        return isPc.value ? pcCom : phoneCom
    }
})